<template>
	<div class="page-content">
		<div class="page-title">
			请输入档案编号
			<div style="float: right;"><Timer title="输入档案编号"></Timer></div>
		</div>
		
		<div style="height: 695px; background-color: #f8f9fb; padding: 50px; "  >
			 
			<div class="input-group" style="width: 800px;">
				<label>档案编号：</label>
				<input v-model="archiveCode" style="flex:1;"  />
			</div> 
			
			<div class="keyboard" style="" @click="key">
				 <div class="keyboard-row">
					 <button class="key">1</button>
					 <button class="key">2</button>
					 <button class="key">3</button>
				 </div>
				 <div class="keyboard-row">
					 <button class="key">4</button>
					 <button class="key">5</button>
					 <button class="key">6</button>
				 </div>
				 <div class="keyboard-row">
					 <button class="key">7</button>
					 <button class="key">8</button>
					 <button class="key">9</button>
				 </div>
				 <div class="keyboard-row">
					 <button class="key">0</button>
					 <a class="key " style="flex:2; display: flex; justify-content: center; align-items: center;"> 
						<svg t="1604297383925" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
						   p-id="1196" width="32" height="32"><path d="M980.4 849.5H326.2c-13.6 0-25.3-7.8-31.7-20.4L17.2 537.5c-15.6-16.4-15.6-46.3 0-62.7L299.3 178c7.7-8.1 18.1-11.9 28.5-10.8h652.5c21 0 36.8 18.2 36.8 42.3v597.8c0 24-15.8 42.2-36.7 42.2z m-640.8-60h617.5V227.1H335.4l-265.2 279 269.4 283.4z" p-id="1197"></path>
						   <path d="M395.929 710.279l446.534-446.534 42.426 42.426-446.534 446.534z" p-id="1198"></path><path d="M395.999 306.162l42.426-42.426L884.958 710.27l-42.426 42.426z" p-id="1199"></path>
					   </svg>
					 </a> 
				 </div>
			</div>
		</div>
		 
		<div style="height: 129px;" >
			<a class="btn-big" @click="confirmArchiveCode">
				确 定
			</a>
		</div>
		
	</div>
</template>

<script>
	export default{ 
		data(){
				return {
					archiveCode:'',
				}
		},
		
		methods:{
			key(event){
				let num = event.target.innerText;
				if( num.length ==  1)
					this.archiveCode = this.archiveCode + '' + num; 
				else if(num.length ==  0 && this.archiveCode.length > 0)
					this.archiveCode = this.archiveCode.substring(0, this.archiveCode.length -1)
			},
			
			confirmArchiveCode(){
				if(this.archiveCode.length < 6){
					this.toast("请输入合法的档案号");
					return;
				}
				
				this.send({name:'SaveArchiveCode', archiveCode:this.archiveCode, remark:'保存档案号',next:'/check/input/school'})
			}
		}
	}
</script>

<style scoped="">
	.keyboard{
		border:solid 2px #adbac3; height:485px; margin:50px auto; width:800px; border-radius: 20px;
		display: flex; flex-flow: column; 
	}
	
	.keyboard-row{
		padding: 0.5rem; 
		flex:1;
		display: flex;
	}
	.key{
		width:30%; 
		margin:6px;
		flex:1;
		background-color: #adbac3;
		border-radius: 10px;
		border:solid 1px #ccc;
		font-size: 32px;
	}
</style>
